<template>
  <div>
    <div>
      <el-button @click="dialogVisible=true,resetForm()" type="primary">新增</el-button>
    </div>
    <el-table :data="tableList" border style="width: 100%">
      <el-table-column prop="PersonId" label="id"></el-table-column>
      <el-table-column prop="PersonName" label="姓名"></el-table-column>
      <el-table-column prop="Gender" label="性别">
        <template slot-scope="scope">
          {{scope.row.Gender==1?'男':'女'}}
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete"  @click="deleteFcae(scope.row.PersonId)"></el-button>
        </template>
      </el-table-column>
    </el-table>
<!-------------------------表单----------------------------->
    <el-dialog
      title="信息"
      :visible.sync="dialogVisible"
      width="40%"
      :close-on-click-modal="false"
    >
      <el-form :rules="rules" :model="faceForm" label-width="80px">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="true"
          :on-success="handleAvatarSuccess"
          :on-change="handleRemove"
          :before-upload="beforeAvatarUpload">
          <img v-if="faceForm.imageUrl" :src="faceForm.imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-form-item label="用户名" v-show="true" prop="PersonName" >
          <el-input v-model="faceForm.PersonName" />
        </el-form-item>
        <el-form-item label="手机号" v-show="true" prop="PersonId">
          <el-input v-model="faceForm.PersonId" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio v-model="faceForm.Gender" :label="1">男</el-radio>
          <el-radio v-model="faceForm.Gender" :label="2">女</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import {createFace, DeleteFace, listFace} from "@/api/system/face";

export default {
  name: "indexlist",
  data(){
    return{//图片
      tableList:[],
      dialogVisible:false,
      // 查询参数
      queryParams: {
        PersonId:null,
        PersonName:null,
        Gender:null
      },
      faceForm:{
        imageUrl:null,
        PersonName:null,
        PersonId:null,
        Gender:null,
        Image:null,
      },
    }
  },
  mounted() {
    this.getface();
  },
  methods:{
    //查询人脸库
    getface(){
      this.loading = true;
      listFace(this.queryParams).then(res=>{
        this.tableList=res.PersonInfos;
        // console.log(res)
        this.loading = false;
      })
    },
    //提交表单
    submitForm(){
      let formData = new FormData();
      for (let key in this.faceForm) {
        formData.append(key, this.faceForm[key])
      }
      console.log(formData)
      createFace(formData).then(res=>{
        this.$modal.msgSuccess("新增成功");
        console.log(res)
        this.dialogVisible=false;
        this.getface();
      })
    },
    //重置表单
    resetForm(){
      this.faceForm.imageUrl='';
      this.faceForm.PersonName='';
      this.faceForm.PersonId='';
      this.faceForm.Gender='';
      this.faceForm.Image='';
    },
    //删除人员
    deleteFcae(PersonId){
      // var uid=this.tableList.PersonId
      DeleteFace(PersonId).then(res=>{
        this.$modal.msgSuccess("删除成功");
        this.getface();
      })
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg/';
      const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      return isJPG && isLt2M;
    },
    //图片转base64
    handleRemove(file, fileList) {
      let reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = () => {
        console.log("file 转 base64结果：" + reader.result);
        this.faceForm.Image = reader.result
      };
      reader.onerror = function (error) {
        console.log("Error: ", error);
      };
    },
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
